<template>
	<div class="abc">
		<div class="abd">
			<el-form :model="user" label-width="80px">
				<div class="login-main">
					<el-form-item style="margin-left:16%;">
						<h1>机考系统登录端</h1>
					</el-form-item>
					<el-form-item label="账号">
						<el-input id="username" v-model="user.username" type="text" clearable placeholder="请输入账号">
						</el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input id="pwd" v-model="user.password" type="password" show-password placeholder="请输入密码">
						</el-input>
					</el-form-item>
					<el-form-item style="padding: 1% 25%;">
						<el-button :autofocus="aaa" native-type="submit" type="primary" @click="login()" round>登录
						</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				aaa:true,
				user: {
					username: '',
					password: ''
				}
			}
		},
		methods: {
			...mapMutations(['setName', 'setIsLogined', 'setUser']),
			login() {
				if (this.user.username== "") {
					this.$message.error("请先输入账号！")
					var username = document.getElementById("username")
					username.focus()
					return
				}else if(this.user.password==""){
					this.$message.error("请输入密码！")
					var username = document.getElementById("pwd")
					username.focus()
					return
				}

				this.$ajax.post('login', this.user).then(res => {
					var result = res.data;
					if (result.success) {
						var name = result.data.name;
						var token = result.data.token;
						var roles = result.data.roles;
						var id = result.data.id;
						window.sessionStorage.setItem("name", name);
						window.sessionStorage.setItem("token", token);
						window.sessionStorage.setItem("id", id);
						window.sessionStorage.setItem("roles", roles);
						// this.setName(name);
						// this.setIsLogined(true);
						// this.setUser(this.user.username);
						this.$router.replace('/new');
					} else {
						this.user.username = '';
						this.user.password = '';
						this.$message.error('用户名或密码错误');
						document.getElementById("username").focus()
						this.aaa=true
					}
				}).catch(error => {
					this.$message.error('网络连接失败');
				})
			}
		},
		mounted() {
			if (location.href.indexOf("#reloaded") == -1) {
				location.href = location.href + "#reloaded";
				location.reload();

			}
			this.aaa=true
		},
		created() {
			this.aaa=true
		}
		

	}
</script>

<style scoped>
	div.abc {
		background-image: url(../img/bg2.jpg);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-width: 1000px;
		z-index: -10;
		zoom: 1;
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-position: center 0;
	}

	.login-main {
		padding: 25px 15px 15px 15px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 5px;
	}

	div.abd {
		color: #000000;
		position: absolute;
		top: 25%;
		right: 35%;
		width: 30%;
		height: 35%;
	}

	.el-input {
		width: 80%;
	}
</style>
